﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/public/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<head>
<title>重庆邮政XXXX管理平台</title>
<meta name="decorator" content="decDefault" />

</head>
<body>
<div class="contentpanel">
<div class="row">
    <div class="col-sm-3 animated fadeInLeft animate1">
        <div class="panel panel-success panel-stat">
            <div class="panel-heading">

                <div class="stat">
                    <div class="row">
                        <div class="col-xs-5">
                            <i class="fa fa-user fa-4x"></i>
                        </div>
                        <div class="col-xs-7">
                            <small class="stat-label">新增</small>
                            <h4>22</h4>
                        </div>
                    </div>
                    <!-- row -->

                    <div class="mb15"></div>

                    <div class="row">
                        <div class="col-xs-6">
                            <small class="stat-label">会员数</small>
                            <h1>14231</h1>
                        </div>

                    </div>
                    <!-- row -->
                </div>
                <!-- stat -->

            </div>
            <!-- panel-heading -->
        </div>
        <!-- panel -->
    </div>
    <!-- col-sm-3 -->
    <div class="col-sm-3 animated fadeInRight animate2">
        <div class="panel panel-danger panel-stat">
            <div class="panel-heading">

                <div class="stat">
                    <div class="row">
                        <div class="col-xs-5">
                            <i class="fa fa-bank fa-4x"></i>
                        </div>
                        <div class="col-xs-7">
                            <small class="stat-label">新增</small>
                            <h4>311</h4>
                        </div>
                    </div>
                    <!-- row -->

                    <div class="mb15"></div>

                    <small class="stat-label">店铺数</small>
                    <h1>158,112</h1>

                </div>
                <!-- stat -->

            </div>
            <!-- panel-heading -->
        </div>
        <!-- panel -->
    </div>
    <!-- col-sm-3 -->
    <div class="col-sm-3 animated fadeInRight animate3">
        <div class="panel panel-primary panel-stat">
            <div class="panel-heading">

                <div class="stat">
                    <div class="row">
                        <div class="col-xs-5">
                            <i class="fa fa-file-text fa-4x"></i>
                        </div>
                        <div class="col-xs-7">
                            <small class="stat-label">新增</small>
                            <h4>931</h4>
                        </div>
                    </div>
                    <!-- row -->

                    <div class="mb15"></div>

                    <small class="stat-label">订单数</small>
                    <h1>123,223</h1>

                </div>
                <!-- stat -->

            </div>
            <!-- panel-heading -->
        </div>
        <!-- panel -->
    </div>
    <!-- col-sm-3 -->
    <div class="col-sm-3 animated fadeInRight animate4">
        <div class="panel panel-info panel-stat">
            <div class="panel-heading">

                <div class="stat">
                    <div class="row">
                        <div class="col-xs-5">
                            <i class="fa fa-money fa-4x"></i>
                        </div>
                        <div class="col-xs-7">
                            <small class="stat-label">新增</small>
                            <h1>111</h1>
                        </div>
                    </div>
                    <!-- row -->

                    <div class="mb15"></div>
                    <small class="stat-label">交易额</small>
                    <h1>23,412,211</h1>
                    <!-- row -->

                </div>
                <!-- stat -->

            </div>
            <!-- panel-heading -->
        </div>
        <!-- panel -->
    </div>
    <!-- col-sm-3 -->
</div>
<!-- row -->

<div class="panel panel-default animated fadeInRight animate5">
    <div class="panel-heading">
        <div class="panel-btns">
            <a href="" class="minimize">−</a>
        </div>
        <h5 class="panel-title">${homeMsg}</h5>
    </div>
    <div class="panel-body">
        <div class="row m-t-20">
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-aqua-darker" href="#">22</a>
                <h5>${homeMsg}</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-aqua-lighter" href="#">12</a>
                <h5>商品审核</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-red-darker" href="#">33</a>
                <h5>产品审核</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-aqua" href="#">11</a>
                <h5>开店审核</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-blue" href="#">22</a>
                <h5>资质库</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-blue-darker" href="#">31</a>
                <h5>产品资质审核</h5>
            </div>

            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-purple" href="#">5</a>
                <h5>资质到期提醒</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-primary" href="#">23</a>
                <h5>合约到期提醒</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-purple-darker" href="#">12</a>
                <h5>费用到期提醒</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-green" href="#">321</a>
                <h5>续约审核</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-blue-lighter" href="#">999</a>
                <h5>续费审核</h5>
            </div>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 text-center m-b-20">
                <a class="task-bg rounded-corner center-block bg-green-darker" href="#">10</a>
                <h5>商品资质审核</h5>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-btns">
                    <a href="" class="minimize">−</a>
                </div>
                <h4 class="panel-title">店铺销售TOP5</h4>
            </div>
            <div class="panel-body">

                <span class="sublabel">水云间旗舰店（123,331元）</span>

                <div class="progress progress-md progress-striped active">
                    <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90"
                         role="progressbar"
                         class="progress-bar progress-bar-danger"></div>
                </div>
                <!-- progress -->

                <span class="sublabel">水云间旗舰店（123,331元）</span>

                <div class="progress progress-md progress-striped active">
                    <div style="width: 88%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="88"
                         role="progressbar"
                         class="progress-bar progress-bar-warning"></div>
                </div>
                <!-- progress -->

                <span class="sublabel">水云间旗舰店（123,331元）</span>

                <div class="progress progress-md progress-striped active">
                    <div style="width: 72%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="72"
                         role="progressbar"
                         class="progress-bar progress-bar-primary"></div>
                </div>
                <!-- progress -->

                <span class="sublabel">水云间旗舰店（123,331元）</span>

                <div class="progress progress-md progress-striped active">
                    <div style="width: 63%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="63"
                         role="progressbar"
                         class="progress-bar progress-bar-success"></div>
                </div>
                <!-- progress -->

                <span class="sublabel">水云间旗舰店（123,331元）</span>

                <div class="progress progress-md progress-striped active">
                    <div style="width: 55%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="55"
                         role="progressbar"
                         class="progress-bar progress-bar-info"></div>
                </div>
                <!-- progress -->


            </div>
            <!-- panel-body -->
        </div>
        <!-- panel -->
    </div>
    <!-- col-sm-9 -->

    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-btns">
                    <a href="" class="minimize">−</a>
                </div>
                <h4 class="panel-title">销售品类1111TOP5</h4>
            </div>
            <div class="panel-body-nopadding" id="chart1" style="height:255px">

            </div>
        </div>
    </div>
    <!-- col-sm-3 -->

</div>
<!-- row -->
</div>

<script>
    var myChart = echarts.init(document.getElementById('chart1'));
    var option = {
        title: {
            x: 'center',
//      text: 'ECharts例子个数统计',
//      subtext: 'Rainbow bar example',
//      link: 'http://echarts.baidu.com/doc/example.html'
        },
        tooltip: {
            trigger: 'item'
        },
        /*toolbox: {
         show: true,
         feature: {
         dataView: {show: true, readOnly: false},
         restore: {show: true},
         saveAsImage: {show: true}
         }
         },*/
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        xAxis: [
            {
                type: 'category',
                show: false,
                data: ['面膜', '洗衣机', '空调', '饼干', '水果']
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: '销售品类排行',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B'/*,
                                 '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                 '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'*/
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                data: [321, 221, 181, 160, 132],
                markPoint: {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,0,0)'/*,
                         formatter: function(params){
                         return '<img src="'
                         + params.data.symbol.replace('image://', '')
                         + '"/>';
                         }*/
                    },
                    data: [
                        {xAxis: 0, y: 350, name: 'Line'},
                        {xAxis: 1, y: 350, name: 'Bar'},
                        {xAxis: 2, y: 350, name: 'Scatter'},
                        {xAxis: 3, y: 350, name: 'K'},
                        {xAxis: 4, y: 350, name: 'Pie'}
                    ]
                }
            }
        ]
    };


    myChart.setOption(option);
    //  随容器大小改变echarts大小
    window.onresize = myChart.resize;
    $(function () {

    })

</script>
</body>
</html>